<template>
  <div class="project-detail">
    <el-card class="detail-card">
      <template #header>
        <div class="card-header">
          <h2>项目详情</h2>
        </div>
      </template>
      
      <div class="project-info">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="项目名称">{{ project.name }}</el-descriptions-item>
          <el-descriptions-item label="发起时间">{{ project.startTime }}</el-descriptions-item>
          <el-descriptions-item label="募捐目标">¥{{ project.targetAmount }}</el-descriptions-item>
          <el-descriptions-item label="当前进度">¥{{ project.currentAmount }}</el-descriptions-item>
          <el-descriptions-item label="项目状态" :span="2">
            <el-tag :type="getStatusType(project.status)">{{ project.status }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="项目描述" :span="2">
            {{ project.description }}
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <div class="donation-progress">
        <h3>募捐进度</h3>
        <el-progress 
          :percentage="getDonationPercentage()"
          :format="progressFormat"
          :stroke-width="20"
          status="success"
        />
      </div>

      <div class="action-buttons" v-if="project.status === '进行中'">
        <el-button type="primary" @click="handleDonate">立即捐款</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

// 项目数据（实际应用中需要从后端获取）
const project = ref({
  id: '',
  name: '示例项目',
  startTime: '2024-01-01',
  targetAmount: 100000,
  currentAmount: 35000,
  status: '进行中',
  description: '这是一个示例慈善项目的详细描述。该项目旨在帮助更多需要帮助的人。'
})

// 获取项目详情
const getProjectDetail = async () => {
  const projectId = route.params.id
  // TODO: 调用后端API获取项目详情
  // const response = await api.getProjectDetail(projectId)
  // project.value = response.data
}

// 计算募捐进度百分比
const getDonationPercentage = () => {
  return Math.min(100, (project.value.currentAmount / project.value.targetAmount) * 100)
}

// 进度条格式化
const progressFormat = (percentage: number) => {
  return `${project.value.currentAmount} / ${project.value.targetAmount}`
}

// 获取状态标签类型
const getStatusType = (status: string) => {
  const statusMap: Record<string, string> = {
    '进行中': 'success',
    '已完成': 'info',
    '已关闭': 'danger'
  }
  return statusMap[status] || 'info'
}

// 处理捐款按钮点击
const handleDonate = () => {
  // TODO: 实现捐款功能
}

onMounted(() => {
  getProjectDetail()
})
</script>

<style scoped lang="scss">
.project-detail {
  padding: 20px;
  
  .detail-card {
    max-width: 1000px;
    margin: 0 auto;

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }

  .project-info {
    margin-bottom: 30px;
  }

  .donation-progress {
    margin: 30px 0;

    h3 {
      margin-bottom: 15px;
    }
  }

  .action-buttons {
    margin-top: 20px;
    text-align: center;
  }
}
</style>